<template>
  <div class="search-add">
    <van-nav-bar
      class="app-nav-bar"
      title="文章发布" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="title"
          name="title"
          label="标题"
          placeholder="标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <van-field
          v-model="content"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
          show-word-limit
          rows="5"
          autosize
          name="content"
          label="内容"
          :rules="[{ required: true, message: '请填写内容' }]"
        />
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="upFileList" multiple :after-read="uploaderFile" :max-count="1" />
          </template>
        </van-field>
        <van-field
          v-model="time"
          is-link
          readonly
          name="time"
          label="时间选择"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-field
          v-model="local"
          is-link
          readonly
          name="local"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-field
          v-model="day"
          is-link
          readonly
          name="day"
          label="日历"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
      </van-cell-group>
      <div style="margin: 24px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-calendar v-model="showCalendar" @confirm="onConfirmDay" />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="onConfirmTime"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="localList"
        @confirm="onConfirmLocal"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { areaList } from '@vant/area-data'
import dayjs from 'dayjs'
export default {
  components: {},
  props: {},
  data () {
    return {
      title: '',
      content: '',
      uploader: '',
      upFileList: [],
      localList: areaList,
      time: '',
      local: '',
      day: '',
      showPicker: false,
      showArea: false,
      showCalendar: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async uploaderFile (fd) {
      const file = new FormData()
      file.append('file', fd.file)
      await this.$http.post(`api/file/upload/${fd.file.name}`, file).then(({ data: res }) => {
        if (res.code === 0) this.uploader = process.env.VUE_APP_API_BASE_URL + res.data
        console.log(res, 'file')
      })
    },
    onConfirmDay (val) {
      this.day = dayjs(val).format('YYYY/MM/DD')
      this.showCalendar = false
    },
    onConfirmTime (val) {
      this.time = val
      this.showPicker = false
    },
    onConfirmLocal (val) {
      this.local = `${val[0].name}-${val[1].name}-${val[2].name}`
      this.showArea = false
    },
    async onSubmit (from) {
      const data = {
        ...from,
        name: this.user.username,
        uploader: this.uploader
      }
      await this.$http.post('api/tableTest', data).then(({ data: res }) => {
        if (res.code === 0) this.$router.push({ name: 'home', params: { refresh: true } })
        this.title = ''
        this.content = ''
        this.uploader = ''
        this.time = ''
        this.local = ''
        this.day = ''
      })
    }
  }
}
</script>

<style scoped lang="less">
.search-add{

}
</style>
